<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search Test - Inline</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body { padding: 20px; font-family: Arial; }
        .container { max-width: 1200px; margin: 0 auto; }
        .search-box {
            background: #f0f0f0;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        input {
            padding: 12px;
            width: 400px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 4px;
        }
        button {
            padding: 12px 24px;
            margin-left: 10px;
            font-size: 16px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover { background: #5a67d8; }
        .results {
            border: 2px solid #ddd;
            padding: 20px;
            min-height: 300px;
            border-radius: 8px;
            background: white;
        }
        .node-item {
            padding: 15px;
            margin: 10px 0;
            background: #f8f9fa;
            border-left: 4px solid #667eea;
            cursor: pointer;
            transition: all 0.3s;
        }
        .node-item:hover {
            background: #e9ecef;
            transform: translateX(5px);
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .success { background: #d4edda; color: #155724; }
        .error { background: #f8d7da; color: #721c24; }
        .info { background: #d1ecf1; color: #0c5460; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔍 Search Functionality Test</h1>

        <div class="search-box">
            <input type="text" id="searchInput" placeholder="Try searching for: user, client, fee, payout" />
            <button id="searchBtn" onclick="doSearch()">Search</button>
            <button onclick="clearAll()">Clear</button>
        </div>

        <div id="status" class="status info">Ready to search...</div>

        <div class="results" id="searchResults">
            <p style="color: #999;">Search results will appear here...</p>
        </div>
    </div>

    <script>
        // Search function
        async function doSearch() {
            const query = document.getElementById('searchInput').value;
            const statusDiv = document.getElementById('status');
            const resultsDiv = document.getElementById('searchResults');

            if (!query) {
                statusDiv.className = 'status error';
                statusDiv.innerHTML = '❌ Please enter a search term';
                return;
            }

            statusDiv.className = 'status info';
            statusDiv.innerHTML = `🔄 Searching for "${query}"...`;

            try {
                const response = await axios.get('http://localhost:5555/api/search', {
                    params: { q: query }
                });

                const results = response.data;

                if (results.length === 0) {
                    statusDiv.className = 'status info';
                    statusDiv.innerHTML = `ℹ️ No results found for "${query}"`;
                    resultsDiv.innerHTML = '<p style="color: #999;">No matching nodes found. Try another search term.</p>';
                    return;
                }

                statusDiv.className = 'status success';
                statusDiv.innerHTML = `✅ Found ${results.length} results for "${query}"`;

                const resultsHtml = results.slice(0, 20).map((node, index) => `
                    <div class="node-item">
                        <div style="font-weight: bold; color: #333; margin-bottom: 5px;">
                            ${index + 1}. ${node.label}
                        </div>
                        <div style="font-size: 12px; color: #666; margin-bottom: 5px;">
                            ${node.id}
                        </div>
                        <div style="font-size: 14px; color: #667eea;">
                            Degree: ${node.degree} | In: ${node.in_degree} | Out: ${node.out_degree}
                        </div>
                    </div>
                `).join('');

                resultsDiv.innerHTML = resultsHtml;

            } catch (error) {
                statusDiv.className = 'status error';
                statusDiv.innerHTML = `❌ Error: ${error.message}`;
                resultsDiv.innerHTML = '<p style="color: red;">Failed to perform search. Check console for details.</p>';
                console.error('Search error:', error);
            }
        }

        // Clear function
        function clearAll() {
            document.getElementById('searchInput').value = '';
            document.getElementById('searchResults').innerHTML = '<p style="color: #999;">Search results will appear here...</p>';
            document.getElementById('status').className = 'status info';
            document.getElementById('status').innerHTML = 'Ready to search...';
        }

        // Enter key handler
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                doSearch();
            }
        });

        // Test search on load
        window.onload = function() {
            console.log('Page loaded, search functionality ready');
        };
    </script>
</body>
</html>